{include file="header" title="$title" /}
    <div class="page-title i-card-main">
        <i class="iconfont icon-page"></i>
        <span>CHALLENGES LIST</span>
    </div>
    <div class="i-card-main">
        <table class="table">
            <thead>
            <tr>
                <th>SolveID</th>
                <th>Title</th>
                <th>Category</th>
                <th>Score</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        <nav id="page" style="display: none;">
            <ul class="pagination justify-content-center">
            </ul>
        </nav>
    </div>  
    {include file="footer" /}
</div>
<script>
$(".loading").show();
$(".i-card-main").eq(1).hide();

$(document).ready(function(){
    $.get("/api/v1/getChallengeList?page=" + page,function(res){
        if (res.code != 200) {
            layer.msg(res.msg);
            return;
        }
        
        const data = res.data.data;
        let html = "";
        for(let i = 0, len = data.length; i < len; i++){
            const {id, title, category, score, state} = data[i];
            const badgeText = state ? '显示' : '隐藏';
            html += `<tr><th scope='row'>${id}</th><td>${title}</td><td>${category}</td><td>${score}</td>`;
            html += `<td><span class='badge ${state ? 'badge-success' : 'badge-secondary'} state' id='${id}'>${badgeText}</span>`;
            html += ` <span class='badge badge-primary' id='${id}'>修改</span> <span class='badge badge-danger' id='${id}'>删除</span></td></td>`;
        }
        pages(res)
        $("tbody").html(html);
        $(".loading").hide();
        $(".i-card-main").eq(1).show();
    });
});

$("tbody").on("click", "span", function(){
    const id = $(this).attr("id");
    const value = $(this).hasClass("state") ? ($(this).hasClass("badge-success") ? 'display' : 'hidden') : '';
    if($(this).hasClass("badge-primary")){
        window.location.href = "/admin/editChallenge/" + id;
    } else if(value){
        $.post("/api/v1/editChallengeState", {"value":value, "id":id}, function(res){
            if(res.code == 200){
                layer.msg(res.msg);
                setTimeout(function(){
                    window.location.reload();
                }, 500);
            } else {
                layer.msg(res.msg);
            }
        });
    } else {
        layer.confirm('确定要删除此挑战吗！？', {
            icon: 5,
            btn: ['确定', '取消']
        }, function(){
            $.post("/api/v1/deleteChallenge", {"id":id}, function(res){
                if(res.code == 200){
                    layer.msg(res.msg);
                    setTimeout(function(){
                        window.location.reload();
                    }, 1000);
                } else {
                    layer.msg(res.msg);
                }
            });
        });
    }
});

</script>
 </body></html>